import React from 'react';
import { createRoot } from 'react-dom/client';

// 最基础的React组件
function BasicApp() {
  return React.createElement('div', {
    style: {
      width: '100vw',
      height: '100vh',
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center',
      background: 'linear-gradient(135deg, #a8edea 0%, #fed6e3 100%)',
      fontFamily: 'Arial, sans-serif'
    }
  }, 
    React.createElement('div', {
      style: {
        background: 'white',
        padding: '40px',
        borderRadius: '12px',
        boxShadow: '0 10px 30px rgba(0,0,0,0.2)',
        textAlign: 'center'
      }
    },
      React.createElement('h1', {
        style: { color: '#1890ff', marginBottom: '20px' }
      }, '🎉 基础React应用正常运行！'),
      React.createElement('p', {
        style: { color: '#666', fontSize: '16px' }
      }, '如果你能看到这个页面，React就是正常的！'),
      React.createElement('div', {
        style: {
          background: '#f6ffed',
          border: '1px solid #b7eb8f',
          borderRadius: '8px',
          padding: '20px',
          marginTop: '20px'
        }
      },
        React.createElement('p', { style: { margin: 0, color: '#52c41a' } }, '✓ React基础功能正常'),
        React.createElement('p', { style: { margin: '8px 0', color: '#52c41a' } }, '✓ 组件渲染成功'),
        React.createElement('p', { style: { margin: 0, color: '#52c41a' } }, '✓ 样式应用正常')
      )
    )
  );
}

console.log('开始初始化基础React应用...');

try {
  const rootElement = document.getElementById('root');
  if (!rootElement) {
    throw new Error('找不到root元素');
  }
  
  console.log('创建React根节点...');
  const root = createRoot(rootElement);
  
  console.log('渲染React应用...');
  root.render(React.createElement(BasicApp));
  
  console.log('✅ 基础React应用初始化成功！');
} catch (error) {
  console.error('❌ 基础React应用初始化失败:', error);
  
  const rootElement = document.getElementById('root');
  if (rootElement) {
    rootElement.innerHTML = `
      <div style="
        padding: 40px;
        text-align: center;
        font-family: Arial, sans-serif;
        background: #fff2f0;
        border: 1px solid #ffccc7;
        border-radius: 8px;
        margin: 20px;
        color: #ff4d4f;
      ">
        <h2>❌ 基础React应用初始化失败</h2>
        <p>错误信息: ${error.message}</p>
        <p>请检查浏览器控制台获取详细信息</p>
        <button onclick="window.location.reload()" style="
          background: #ff4d4f;
          color: white;
          border: none;
          padding: 10px 20px;
          border-radius: 4px;
          cursor: pointer;
        ">重新加载页面</button>
      </div>
    `;
  }
}